<template>
	<!-- 盲盒列表 -->
	<view>
		<view class="goodslist">
			<view class="goods" v-for="(item,index) in goodsList" :key="index" @click="toDetail(item.id,item)">
				<image :src="item.cover_image" class="goods_img"></image>
				<view class="goods_tag">
					<view class="goods_tag_one" v-if="item.label_name.length > 0">
						<text>{{item.label_name[0]}}</text>
					</view>
					<view class="goods_tag_two" v-if="item.label_name.length > 1">
						<text>{{item.label_name[1]}}</text>
					</view>
					<view class="goods_tag_three" v-if="item.label_name.length > 2">
						<text>{{item.label_name[2]}}</text>
					</view>
				</view>
				<view class="goods_info">
					<view class="goods_info_title">{{item.name}}</view>
					<view class="goods_info_desc">{{item.activity_describe}}</view>
					<view class="goods_info_price">
						<view class="price" v-if="item.first_blood">￥ {{item.first_blood}}</view>
						<view class="sales">{{item.consume_num}}开盒</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "blindbox",
		props: {
			goodsList: {
				type: Array,
				default: () => {
					return []
				}
			},
			goodsType: {
				type: Number | String,
				default: 1
			}
		},
		methods: {
			toDetail(id, item) {

				const param = encodeURIComponent(JSON.stringify({
					id: item.id,
					name: item.name,
					pt: item.pt,
					setting_id: item.setting_id,
					ss: item.ss,
					xy: item.xy,
					first_blood: item.first_blood,
					label_name: item.label_name,
					cover_image: item.cover_image,
					cs: item.cs,
					activity_describe: item.activity_describe,
					consume_num: item.consume_num
				}))
				uni.navigateTo({
					url: `/pages/choujiang/index1?option=${param}`
				})
				return false
				// uni.navigateTo({
				// 	url: `/pages/index/extractionBlindbox?id=${id}`
				// })
				// if(!uni.getStorageSync('token')){
				// 	uni.showModal({
				// 		title: '温馨提示',
				// 		content: '登录后可继续操作，是否登录？',
				// 		success: (res) => {
				// 			if (res.confirm) {
				// 				uni.navigateTo({
				// 					url: '/pages/login/login'
				// 				})
				// 			}
				// 		}
				// 	})
				// }else{
				// 	uni.navigateTo({
				// 		url:`/pages/index/extractionBlindbox?id=${id}`
				// 	})
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.goodslist {
		padding: 0 30rpx;
		display: flex;
		flex-wrap: wrap;

		.goods {
			width: 336rpx;
			background-color: #F8F8F8;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			&:nth-child(2n-1) {
				margin-right: 18rpx;
			}

			&_img {
				width: 336rpx;
				height: 336rpx;
				border-radius: 20rpx 20rpx 0 0;
			}

			&_tag {
				@include between;
				margin-top: 22rpx;
				padding: 0 24rpx;
				width: 336rpx;
				height: 44rpx;
				background-color: #F8F8F8;

				&_one {
					width: 88rpx;
					height: 44rpx;
					background: linear-gradient(#FACA68, #FE240B);
					border-radius: 12rpx;
					@include center;

					text {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
						@include one;
					}
				}

				&_two {
					width: 88rpx;
					height: 44rpx;
					background: linear-gradient(#08E5FF, #9363FF);
					border-radius: 12rpx;
					@include center;

					text {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
						@include one;
					}
				}

				&_three {
					width: 88rpx;
					height: 44rpx;
					background: linear-gradient(#F767C4, #665EFF);
					border-radius: 12rpx;
					@include center;

					text {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
						@include one;
					}
				}
			}

			&_info {
				background-color: #FBFBFB;
				padding: 24rpx;
				border-radius: 0 0 20rpx 20rpx;

				&_title {
					width: 288rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #333333;
					padding: 0 9rpx;
					@include one;
				}

				&_desc {
					width: 288rpx;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					padding: 0 7rpx;
					margin-top: 14rpx;
					@include one;
				}

				&_price {
					height: 30rpx;
					@include between;
					padding: 0 9rpx 0 7rpx;
					margin-top: 17rpx;

					.price {
						font-size: 36rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FE3E46;
						width: 200rpx;
						@include one;
					}

					.sales {
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #666666;
						width: 120rpx;
						@include one;
						text-align: right;
					}
				}
			}
		}
	}
</style>
